<template>
    <header class="header">
  <el-row>
    <!-- logo -->
  <el-col :span="6">
    <div class="grid-content bg-purple">
      <nuxt-link class='link' to="/">
      <img src="http://157.122.54.189:9093/images/logo.jpg" alt="">
      </nuxt-link>
    </div></el-col>
    <!-- 导航栏 -->
  <el-col :span="13">
    <div class="grid-content bg-purple-light">
      <nuxt-link class='link' to="/">首页</nuxt-link>
      <nuxt-link class='link' to="/post">旅游攻略</nuxt-link>
      <nuxt-link class='link' to="/hotel">酒店</nuxt-link>
      <nuxt-link class='link' to="/air">国内机票</nuxt-link>
      </div>
      </el-col>
      <!-- 登录注册 -->
  <el-col :span="5">
    <div class="grid-content bg-right">
      <el-dropdown v-if="$store.state.user.userinfo.token" placement='bottom-start'>
        <span class="el-dropdown-link">
        <el-avatar v-if="$store.state.user.userinfo.user.defaultAvatar" size="medium" :src="$axios.defaults.baseURL + $store.state.user.userinfo.user.defaultAvatar"></el-avatar>
        <!-- <el-avatar size="medium" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar> -->
          {{$store.state.user.userinfo.user.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
         <!-- 管理员<i class="el-icon-arrow-down el-icon--right"></i> -->
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="$router.push('/')">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <nuxt-link v-else class='jump' to="/user/login">登录 / 注册</nuxt-link>
      </div>
      </el-col>
</el-row>
    </header>
</template>
<script>
export default {
  data() {
    return {
      token: '',
      user: null
    }
  },
  mounted() {},
  methods: {
    // 用户退出
    handleLogout() {
      if (confirm('你确定要退出吗?')) {
        // 因为数据是响应式的 只要在退出的时候将store里面的数据清理为空对象即可
        // this.$store.commit('user/setuserInfo', {})
        // 调用清除数据方法
        this.$store.commit('user/clearuserInfo')
        // 跳转
        this.$router.push({
          path: '/'
        })
        // this.$router.go(0)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.header {
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-bottom: 1px #ddd solid;
  box-shadow: 0 3px 0 #f5f5f5;
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    height: 60px;
  }
  .bg-purple {
    display: flex;
    justify-content: flex-end;
    .link {
      width: 50%;
      padding: 5px;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .bg-purple-light {
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    .link {
      padding: 0 20px;
      height: 60px;
    }
    .link:hover {
      color: skyblue;
      border-bottom: 5px solid #409eff;
    }
    .nuxt-link-exact-active {
      background: #409eff;
      color: #fff !important;
    }
  }
  .bg-right {
    .jump:hover {
      color: skyblue;
      text-decoration: underline;
    }
    .jump {
      font-size: 14px;
      font-weight: bold;
    }
    .el-dropdown-link {
      display: flex;
      align-items: center;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>